<template>
  <el-form-item :class="getClz(['input-with-select'])" :prop="opt.name" v-if="!opt.hide" v-bind="opt.itemProps"  >
    <div slot="label" style="display: inline-block" v-if="opt.text">{{opt.text}}<el-popover v-if="Boolean(opt.textLabel)" placement="top" trigger="hover"><div>{{opt.textLabel}}</div><i slot="reference" class="el-icon-warning" /></el-popover></div>
    <el-input v-model="value"
              :name="opt.name"
              :placeholder="opt.props.disabled?'':opt.placeholder"
              v-bind="opt.props"
              :show-word-limit="Boolean(opt.props.maxlength)"
              @input="onInput"
              @blur="onBlur(data,column)"
              @change="handleChange"
              @keyup.enter.native="onKeyup(data,column)"
              @dblclick.native="onDblclick(data,column)"
    >
      <el-select v-model="opt.prependKey" slot="prepend" placeholder="请选择" @change="handleChange">
        <el-option
          v-for="(item,idx) in opt.prepend"
          :label="item.label"
          :value="item.value"
          :key="idx">
        </el-option>
      </el-select>
    </el-input>
  </el-form-item>
</template>
<script>
  import extend from '../extend';
  const REG_F = /^[-]?[0-9]*\.?[0-9]*$/
  const REG_Z = /^[0-9]*\.?[0-9]*$/

  export default {
    name: "FormInput",
    mixins:[extend],
    props: {
      column: {
        type:[Object,Array],
        default:{}
      },
      data:{
        type:[Object,Array],
        default:{}
      },
      minin:[Number,String],
      maxin:[Number,String],
      min:[Number,String],
      max:[Number,String],
      fixed:{
        type:[Number,String],
        default:"2"
      }
    },
    data(){
      return {
        value:"",
        opt:{
          name:'',
          text:'',
          textLabel:'',
          className:'',
          itemProps:{},
          props:{
            type:'text',
            disabled:false
          },
          fixed:'2',
          prependKey:'>',
          prependName:'',
          prepend:[
            {label:">",value:">"},
            {label:"=",value:"="},
            {label:"<",value:"<"}
          ],
          hide:false,
          placeholder:''
        }
      }
    },
    created(){
      this.onBlur = this.column.onBlur||LOG;
      this.onChange = this.column.onChange||LOG;
      this.onKeyup = this.column.onKeyup||LOG;
      this.onDblclick = this.column.onDblclick||LOG;
      this.value = this.data[this.opt.name];
      this.$watch(`data.${this.column.name}`,(val)=>{
        this.value = val;
      })
    },
    methods:{
      setValue(val){
        let opt = this.opt;
        if(opt.prependName){
          this.data[opt.prependName] = opt.prependKey;
          this.data[this.opt.name] = val;
        }else{
          this.data[this.opt.name] = val ? (opt.prependKey + val):'';
        }
      },
      setValueMap(){
        this.onChange(this.data,this.column);
      },
      onInput(val){
        // 正则表达式只允许输入数字、负号和小数点
        const regex = this.minin < 0 ? REG_F : REG_Z;
        if (!regex.test(val)) {
          this.value = this.data[this.opt.name];
          return;
        }

        const min = this.opt.min;
        const max = this.opt.max;
        const minin = this.opt.minin;
        const maxin = this.opt.maxin || 999999999.99;
        // 最小值
        if(min !== void 0 && parseFloat(val)<parseFloat(min)){
          this.value = this.data[this.opt.name];
          return;
        }
        if(minin !== void 0 && parseFloat(val)<parseFloat(minin)){
          this.setValue(minin);
          return;
        }
        // 最大值
        if(max !== void 0 && parseFloat(val)>parseFloat(max)){
          this.value = this.data[this.opt.name] ;
          return;
        }
        if(maxin !== void 0 && parseFloat(val)>parseFloat(maxin)){
          this.setValue(maxin);
          return;
        }
        // 小数位
        let fixed = this.fixed;
        let valArr = val.split(".");
        let fixStr = valArr[1]||'';
        if(fixed == 0){
          val = valArr[0];
        }else if(fixStr.length>fixed){
          val = val.substr(0,val.length - (fixStr.length - fixed));
        }
        this.setValue(val);
      },
      handleChange(){
        this.setValue(this.value)
        this.setValueMap();
      }
    }
  }
</script>
<style>
  .input-with-select .el-input-group__prepend{
    padding: 0 16px;
  }

  .form-box .input-with-select .el-select .el-input__inner{
    width:4em !important;
    padding-left:5px;
    padding-right:5px;
    text-align: center;
  }

  .input-with-select .el-input__suffix{
    display: none;
  }
</style>
